<template>
  <div class="ly-tab">
    <ly-tabbar v-model="selectedId" v-bind="options">
      <ly-tab-item v-for="(item, index) in items" :key="index" :class="{'active':index==`${selectedId}`}">
        <span v-if="options.fixBottom && item.icon" slot="icon">
          <i :class="item.icon"></i>
        </span>
        <span>{{ item[labelKey] }}</span>
      </ly-tab-item>
    </ly-tabbar>
  </div>
</template>

<script>
import LyTabbar from "./tabbar";
import LyTabItem from "./tab-item";

export default {
  name: "LyTab",
  components: {
    LyTabbar,
    LyTabItem
  },
  props: {
    value: {
      type: Number,
      default: 0
    },
    items: {
      type: Array,
      default() {
        return [];
      }
    },
    options: {
      type: Object,
      default() {
        return {};
      }
    },
    defaultId:{
      type:Number,
        default :0
    }
  },
  data() {
    return {
      selectedId: this.value,
        defaultIndex:this.defaultId
    };
  },
  computed: {
    labelKey() {
      return this.options.labelKey || "label";
    }
  },
  watch: {
    value(value) {
        console.log(value+'value');
      this.selectedId = value;
    },
    selectedId(value) {
      this.$emit("input", value);
      this.$emit("change", this.items[value], value);
    }
  }
};
</script>

<style lang="scss">
  .ly-tab-item{
    font-size: 14px;
    &.active{
        span{
          font-weight: bold;
          font-size: 16px;
        }

     }
  }
</style>
